<template>
	<view class="page-container">
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      :bar-width="150"
      @change="handleChangeTab"
    />
    
    <view class="body-wrapper">
      <CalendarWeekly v-if="current===0" :courseList="courseList" @change-date="handleChangeDate" />
      <CalendarMonth v-if="current===1" :courseList="courseList" @change-date="handleChangeDate" />
      <view class="course-summary-wrapper" v-if="current===2" v-for="item in summaryList" :key="item.id">
        <CourseSummaryCard :data="item" />
      </view>
    </view>
	</view>
</template>

<script>
  import { format, addDays, subDays } from 'date-fns'
  import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
  import CalendarMonth from '@/pages/course-schedule/components/calendar-month'
  import CalendarWeekly from '@/pages/course-schedule/components/calendar-weekly'
  import CourseSummaryCard from '@/pages/course-schedule/components/course-summary-card'
    
  export default {
    components: {
      CalendarMonth,
      CalendarWeekly,
      CourseSummaryCard,
    },
    data() {
      return {
        list: [{
          name: '周课表'
        }, {
          name: '月考情'
        }, {
          name: '课时统计'
        }],
        current: 0,
        summaryList: [],
      };
    },
    computed: {
    	...mapGetters(['courseList']),
    },
    watch: {
      current: {
        handler(val) {
          if (val === 0) {
            const weeks = this.getWeeks()
            this.getCourseListByPage({
              startDate: format(weeks[0], 'yyyy-MM-dd 00:00:00'),
              endDate: format(weeks[6], 'yyyy-MM-dd 23:59:59'),
            })
          } else if (val === 1) {
            const months = this.getMonths()
            this.getCourseListByPage({
              startDate: format(months[0], 'yyyy-MM-dd 00:00:00'),
              endDate: format(months[months.length - 1], 'yyyy-MM-dd 23:59:59'),
            })
          } else {
            this.summaryList = []
          }
        },
        immediate: true
      }
    },
    methods: {
      ...mapActions(['getCourseListByPage']),
      getWeeks() {
      	const weekList = [];
      	const now = Date.now();
      	const day = new Date().getDay();
        
      	for (let i = 0; i < 7; i++) {
      		let date
          
      		if (day == i) {
      			date = now;
      		} else if (day > i) {
      			date = subDays(now, (day - i));
      		} else {
      			date = addDays(now, (i - day));
      		}

          weekList[i] = date 
      	}
        
      	return weekList;
      },
      getMonths() {
      	const dayList = [];
      	const now = new Date();
        const firstDay = new Date(`${now.getFullYear()}-${now.getMonth()+1}-1`) 
        const monthDays = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate()
      	for (let i = 0; i < monthDays; i++) {
          dayList.push(addDays(firstDay, i)) 
      	}
        
      	return dayList;
      },
      handleChangeDate(daterange) {
        this.getCourseListByPage({
          startDate: format(daterange[0].date, 'yyyy-MM-dd 00:00:00'),
          endDate: format(daterange[daterange.length - 1].date, 'yyyy-MM-dd 23:59:59'),
        })
      },
      handleChangeTab(index) {
        this.current = index;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page-container {
    .body-wrapper {
      .course-summary-wrapper {
        padding: 32rpx;
      }
    }
  }
</style>
